<template>
	<view>
		<view class="w100 flex flex_jc" style="position: fixed;top: 0;z-index: 9999;"  v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white"  v-if="show_ad"></ad>
		</view>
		
		<view :class="show_ad?'mt580':''">
			<u-sticky bgColor="#fff" offset-top="0">
				 <u-tabs :list="kapai_type" @click="typeclick" :current="type_index"></u-tabs>
			</u-sticky>
		</view>

		
		<view class="swiperUnit mt20">
					<!-- 滑块视图 -->
			<swiper :circular="true" :current="tabIndex" @change="tabChange"><!-- current:当前所在滑块的index -->
				<swiper-item v-for="(content,index) in kapai_content" :key="index">
					<view class="w100 flex flex_wrap flex_jc">
						<view class="w710 flex flex_wrap">
							<view class="li" @click="goKapaiDetail(item.id)" v-for="(item,index2) in kapai_content[index].list" v-if="kapai_content[index].is_show">
								<u-image width="100%" height="100%" :src="item.card" @error="reloadimg(index,index2)"></u-image>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="rowDotBox w100">
				<view class="rowDot flex flex_jc flex_wrap">
					<view v-for="(item , index) in kapai_content" :key="index" class="dots">
						<view :class="['dot', index === tabIndex ? 'active' : '']"></view>  
					</view> 
				</view>
			</view>
			
		</view>
		
		<view class="share flex flex_jc w100">
			<button type="default" open-type="share" >
				<view class="share-box">和朋友一起集卡</view>
			</button>
		</view>
		
	</view>
</template>

<script>
	import {getKapaiList} from "@/api/api"
	export default {
		data() {
			return {
				type_index:0,
				kapai_type:[{
						name: '曙光再现 第一弹',
					}, {
						name: '激斗流星 第一弹',
					}, {
						name: '激斗流星 第二弹'
					}, {
						name: '激斗流星 第三弹'
					}, {
						name: '炽热极限 第三弹'
					}, {
						name: '耀闪新光 第一弹'
					}, {
						name: '耀闪新光 第二弹'
					}, {
						name: '耀闪新光 第三弹'
					}
				],
				tabIndex: 0, 
				kapai_content:[],
				is_login:false,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
			}
		},
		
		onShareAppMessage(e) {
		},
		onShareTimeline(e) {
		},
		
		onLoad: function (option) {
			this.getKapaiList()
		},
		onShow:function(){
			this.is_login = uni.getStorageSync('is_login')?uni.getStorageSync('is_login'):false
			
		},
	
		methods:{
			
			isLogin(){
				if(this.is_login){
					return true
				}else{
					//登录
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}
			},
			
			goKapaiDetail(id){
				if(this.isLogin()){
					uni.navigateTo({
						url: '/pages/kapai_detail/index?id='+id,
					}); 
				}
			},
			
			getKapaiList(){
				this.kapai_content = []
		
				getKapaiList(this.kapai_type[this.type_index].name).then(res=>{
					var kapai_list = res.data
					console.log(kapai_list)
					var kapai_list_count = res.data.length
					var kapai_page = Math.ceil(kapai_list_count/9)
					console.log(kapai_page)
					for(var j=kapai_page-1;j>=0;j--){
						var page_content = []
						for(var i=kapai_list.length-1;i>=0;i--){
							if(i>=(j*9)&&i<((j+1)*9)){
								kapai_list[i].img_show = false
								page_content.unshift(kapai_list[i])
							}
						}
						
						if(j>0){
							this.kapai_content.unshift({
								list:page_content,
								is_show:false
							})
						}else{
							this.kapai_content.unshift({
								list:page_content,
								is_show:true
							})
						}
						
					}
				
				})
			},
			
			reloadimg(index,index2){
				
			
			},
			tabChange(e){
				this.tabIndex = e.detail.current
				if(!this.kapai_content[this.tabIndex].is_show){
					this.kapai_content[this.tabIndex].is_show = true
					console.log(uni.getStorageSync(this.kapai_type[this.type_index].name+'list',this.kapai_content))
				}
			},
			
			
			swiperClick(e){
				console.log(e)
				console.log(this.swiper_list[e])
				uni.previewImage({
					urls:this.swiper_list,
					current:e
				})
			},
			
			typeclick(e){
				console.log(e)
				this.type_index = e.index
				this.tabIndex = 0
				this.getKapaiList()
			}
		
		}
	}
</script>
<style>
	/* 设置标题字体颜色*/
	.u-navbar__content__title{color: #FFFFFF!important;}
	/*去掉返回按钮 */
	.u-navbar__content__left{display: none!important;}
	.u-transition{width: 100%;height: 100%;}
	.u-swiper__wrapper__item{width: ;}
	swiper{height:1050rpx}
	
	button::after {
	  border: none;
	}
	button {
	  background-color: #fff!important;
	}
	button {
	  border-radius:0;
	}
	
</style>
<style scoped>
	
	@keyframes big{
	    0%{
	      transform: scale(1);  /*开始为原始大小*/
	  }
	  25%{
	      transform: scale(1.2); /*放大1.1倍*/
	  }
	  50%{
	      transform: scale(1);
	  }
	  75%{
	      transform: scale(1.2);
	  }
	}
	
	
	.share-box{height: 60rpx;line-height: 60rpx;background-color: #0066ff;color: #FFFFFF;text-align: center;
		font-size: 30rpx;border-radius: 10rpx;letter-spacing: 10rpx;margin: 20rpx 0;padding: 0 20rpx;animation: big 2s linear infinite;}
	.share{justify-content: space-between;}
	
	.swiperUnit .li:nth-child(3n+1){margin-left: 0!important;}
	.swiperUnit .li{width: 210rpx;height: 300rpx;margin-left:40rpx;margin-bottom: 40rpx;}
	.swiperUnit{position: relative;}
	
	.rowDotBox{position: absolute;bottom: 20rpx;}	
	.dots{flex-direction: row;justify-content: center;align-items: center;align-content: center;}
	.dot { margin-right:8rpx;width: 40rpx;height: 8rpx;opacity: 1;border-radius: 6rpx;background: #f5f5f5;margin-top:15rpx}
	.dot.active { background: #ff4e54;} 
	
	.progress{width: 300rpx;}
	.e1{color: #0066FF;font-weight: bold;}
</style>